<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sytle.css?v=0.2&d=2016-11-08">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js?v=0.1"></script>
<title>管道疏通-卫生间</title>
</head>
<body>
<body>
<div class="hgj">
<div class="page-all">
<!--头部开始-->
<header>
  <div class="navbar">
    <ul>
      <li class="l-back"><a href="/"><img src="${pageContext.request.contextPath}/images/left.png" alt="返回"/></a></li>
      <li class="n-word">管道疏通</li>
      <li class="n-intro"><a href="${pageContext.request.contextPath}/goods/pipInfo.html">服务介绍</a></li>
    </ul>
  </div>
</header>
<!---内容开始--->
<div class="container">
<div class="lock-type"><span>请选择服务类型</span></div>
<div class="lock-choose" id="pipType">
<a href="javascript:void();" onclick="selectPip(1)">
<span class="open-img" style="background:url(${pageContext.request.contextPath}/images/kitchen-icon.png) center center no-repeat; background-size:50px"></span>
<span class="change-title">厨房管道疏通</span>
</a>
<a href="javascript:void();" onclick="selectPip(2)">
<span class="change-img" style="background:url(${pageContext.request.contextPath}/images/toilet-be-selected.png) center center no-repeat; background-size:50px;"></span>
<span class="open-title">卫生间管道疏通</span>
</a>
</div>
<!---选择服务类型结束-->
<section class="toilet-type">
<div class="toilet-type-title"><span>请选择卫生间类型</span></div>
<div class="choose-toilet" id="toilet-type">
<a href="javascript:void(0);" style=" border:1px solid #ffb736;">
<span class="squat-img"  style="background:url(${pageContext.request.contextPath}/images/dunwei-be-selected.png) center center no-repeat; background-size:50px;" ></span>
<span class="squat-title" style="color:#ffb736;">便池疏通</span>
</a>
<a href="javascript:void(0);" onclick="selectT(2)">
<span class="sit-img"></span>
<span class="sit-title">马桶疏通</span>
</a>
</div>
</section>
<!---卫生间类型选择结束--->

<form action="${pageContext.request.contextPath}/goods/buy.html"
					method="post" id="pipForm">
					<input name="serviceType" value="2" type="hidden" /> <input
						name="pipType" id="tt" type="hidden" value="1"/>
					<!---选项结束---->
					<div class="message">
						<input type="text" class="take-message" name="message" maxlength="20"
							placeholder="如有特殊需求，请留言">
					</div>
				</form>

<!---留言结束--->
</div>
</div>
<!--底部--->
  <footer class="footer"> <span class="t-price">总额：￥<em>100.00元</em></span><a herf="javascript:void(0);" id="btn_sub"><span class="next">下一步</span></a></footer>
</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("#btn_sub").click(function() {

			$("#pipForm").submit();

		});
	});

	function selectPip(t) {
		switch (t) {
		case 1: {
			$("#pipType").empty();
			$("#pipType")
					.append(
							'<a href="javascript:void(0);" > <span class="open-img" style="background:url(${pageContext.request.contextPath}/images/kitchen-be-selected.png) center center no-repeat; background-size:50px"></span><span class="open-title">厨房管道疏通</span></a>');
			$("#pipType")
					.append(
							'<a href="javascript:void(0);" onclick="selectPip(2)"> <span class="change-img" style="background:url(${pageContext.request.contextPath}/images/toilet-icon.png) center center no-repeat; background-size:50px;"></span><span class="change-title">卫生间管道疏通</span></a>');

			$(".toilet-type").css('display', 'none');

			break;
		}
		case 2: {

			$("#pipType").empty();
			$("#pipType")
					.append(
							'<a href="javascript:void(0);" onclick="selectPip(1)"><span class="change-img" style="background:url(${pageContext.request.contextPath}/images/kitchen-icon.png) center center no-repeat; background-size:50px"></span><span class="change-title">厨房管道疏通</span></a>');
			$("#pipType")
					.append(
							'<a href="javascript:void(0);" ><span class="open-img" style="background:url(${pageContext.request.contextPath}/images/toilet-be-selected.png) center center no-repeat; background-size:50px;"></span><span class="open-title">卫生间管道疏通</span></a>');

			//$("#toilet-type").append('<a href="javascript:void(0);" style=" border:1px solid #00cced;"><span class="squat-img" style="background:url(${pageContext.request.contextPath}/images/squat-selected.png) center center no-repeat; background-size:50px;"></span><span class="squat-title" style="color:#00cced;" >便池疏通</span></a>');
			//$("#toilet-type").append('<a href="javascript:void(0);" onclick="selectT(2)"><span class="sit-img"></span><span class="sit-title">马桶疏通</span></a>');
			$(".toilet-type").css('display', 'block');
			break;
			}

		}
		;
	}
	function selectT(t) {
		switch (t) {
		case 1: {

			$("#toilet-type").empty();
			$("#toilet-type")
					.append(
							'<a href="javascript:void(0);" style=" border:1px solid #ffb736;"><span class="squat-img" style="background:url(${pageContext.request.contextPath}/images/dunwei-be-selected.png) center center no-repeat; background-size:50px;"></span><span class="squat-title" style="color:#ffb736;" >便池疏通</span></a>');
			$("#toilet-type")
					.append(
							'<a href="javascript:void(0);" onclick="selectT(2)"><span class="sit-img"></span><span class="sit-title">马桶疏通</span></a>');
			$("#tt").val(1);
			break;
		}
		case 2: {
			$("#toilet-type").empty();
			$("#toilet-type")
					.append(
							'<a href="javascript:void(0);" onclick="selectT(1)"><span class="squat-img" style="background:url(${pageContext.request.contextPath}/images/dunwei-icon.png) center center no-repeat; background-size:50px;"></span><span class="squat-title" >便池疏通</span></a>');
			$("#toilet-type")
					.append(
							'<a href="javascript:void(0);"  style=" border:1px solid #ffb736;"><span class="sit-img" style="background:url(${pageContext.request.contextPath}/images/matong-be-selected.png) center center no-repeat; background-size:50px;"></span><span class="sit-title" style="color:#ffb736;" >马桶疏通</span></a>');
			$("#tt").val(2);
			break;
		}

		}
		;
	}
</script>
</html>
